<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css样式表</title>
		<!--css样式表需要写在style标签中-->
		<!--scc样式根据位置不同分为：
		内联样式--标签的style属性
		内部样式--写在html页面中的style样式表
		外部样式--写在专门css文件中的样式，并使用link进行引入-->
		
		<!--使用link标签导入外部的css样式表-->
		<link rel="stylesheet" href="css/base.css"/>
		<style type="text/css">
		/*
		 * css中注释使用/* * /进行注释
		 */
		/*选择器{
			对象的属性1:属性值1;
			对象的属性2:属性值2;
			...
		}*/
		/*
		 *css样式选择器
		 
		1、标签选择器*/
			td{
				background-color: red;
				font-family: "隶书";
			}
		/*2、类选择器*/
		/*语法:
		.类选择器的名字{
			属性:属性值;
			...
		}
		在控件中可以使用class属性将类选择器的样式导入
		*/
		.myStyle{
			width: 120px;
			height: 30px;
		}
		.tdStyle{
			background-color: blue;
				font-family: "宋体";
		}
		/*3、id选择器*/
		/*语法:
		#标签id名{
			属性:属性值;
			...
		}*/
		#tdSex{
			background-color: bisque;
			font-family: "微软雅黑";
		}
		/*就近原则，范围最小原则
		 * 上述三种基本选择器的优先级：
		 id选择器>类选择器>标签选择器*/
		/*4、派生选择器*/
		/*由上述三种基本选择器组合而成的就是派生选择器
		 */
		td div select{
			/*所有的包含在td标签中的select标签的样式*/
			width: 150px;
		}
		#tdSex p{
			font-family: "楷体";
			color: aqua;
		}
			
		</style>
	</head>
	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action--指定的是服务器端的哪个程序（类-方法）进行响应
			method--使用哪种方式进行数据从客户端发送到服务器。
			  选项：get -- 将客户端信息附加在访问连接url的尾端进行发送信息；
			            缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			            长度会受到限制（不能大于255个字符）
			           汉字容易乱码（字节流方式传输）
			      post-- 将客户端数据信息以数据包的形式发送到服务器端；
			           不存在上述问题。
		-->
		<div align="center">
		<form action="#" method="get">
			<table border="1" cellpadding="0" cellspacing="0" bordercolor="red" style="width: 80%; align-self: center;">
				<tbody>
				<tr>
					<td style="background-color: aqua;">姓名</td><td><input disabled="disabled" type="text" id="txtName" name="txtName" /></td>
				</tr>
				<tr>
					<td class="tdStyle">登录密码</td>
					<td><input class="myStyle" readonly="readonly" type="password" name="txtPaw" id="txtPaw" /></td>
				</tr>
				<tr>
					<td id="tdSex"><p>性别</p></td>
					<!--radio类型的输入框，需要name属性值一样，才具有互斥选择性-->
					<td><input type="radio" id="radSex" name="radSex" checked="checked" />女
					<input type="radio" id="radSex2" name="radSex" />男
					<input type="radio" id="radSex3" name="radSex" />未知</td>
				</tr>
				<tr>
					<td>个人简历</td>
					<td><input type="file" name="fileResume" id="fileResume" /></td>
				</tr>
				<tr>
					<td>兴趣爱好</td>
					<!--checkbox多选框；需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
					<td><input type="checkbox" name="chHobby1" id="chHobby" checked />游泳
					<input type="checkbox" name="chHobby2" id="chHobby" />爬山
					<input type="checkbox" name="chHobby3" id="chHobby" />dota
					<input type="checkbox" name="chHobby4" id="chHobby" />coding
					<input type="checkbox" name="chHobby5" id="chHobby" />testing</td>
				</tr>
				<tr>
					<td>隐藏控件</td>
					<td><input type="hidden" name="txthidden" id="txthidden" value="520" /></td>
				</tr>
				<tr>
					<td>学历</td>
					<td><div>
						<select id="selectXL" name="selectXL">
						<option value=""></option>
						<option value="BK" selected="selected">本科</option>
						<option value="DZ">大专</option>
						<option value="SS">硕士</option>
						<option value="BS">博士</option>
					</select></div></td>
				</tr>
				<tr>
					<td>自我介绍</td>
					<td><textarea name="txtIntroduce" name="txtIntroduce" style="width: 200px; height: 60px;"></textarea></td>
				</tr>
				<tr>
					<td><input type="submit" id="btnSubmit" value="提交" /></td>
					<td><input type="reset" id="btnSubmit" value="重置" /></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
</tbody>
</table>
			
			
		</form>
		</div>
	</body>
</html>
